<template>
  <el-form-item label="字段配置">
    <el-button type="primary" size="small" @click="$refs.column.visible = true">字段配置</el-button>
  </el-form-item>
  <el-form-item label="边框">
    <el-switch v-model="data.children.border"></el-switch>
  </el-form-item>
  <el-form-item label="显示属性">
    <el-input v-model="data.props.label" placeholder="label" clearable></el-input>
  </el-form-item>
  <el-form-item label="值属性">
    <el-input v-model="data.props.value" placeholder="value" clearable></el-input>
  </el-form-item>
  <el-form-item label="请求地址">
    <el-input v-model="data.children.props.url" type="textarea" placeholder="请求地址" autosize></el-input>
  </el-form-item>
  <el-form-item label="请求方法">
    <el-select v-model="data.children.props.method" placeholder="请求方法" clearable>
      <el-option label="GET" value="get"></el-option>
      <el-option label="POST" value="post"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="分页">
    <el-switch v-model="data.children.props.needPage"></el-switch>
  </el-form-item>
  <el-form-item label="当前页" v-if="data.children.props.needPage">
    <el-input v-model="data.children.props.currentPageKey" placeholder="当前页" clearable></el-input>
  </el-form-item>
  <el-form-item label="每页条数" v-if="data.children.props.needPage">
    <el-input v-model="data.children.props.pageSizeKey" placeholder="每页条数" clearable></el-input>
  </el-form-item>
  <el-form-item label="总条数" v-if="data.children.props.needPage">
    <el-input v-model="data.children.props.totalKey" placeholder="总条数" clearable></el-input>
  </el-form-item>
  <el-form-item label="列表" v-if="data.children.props.needPage">
    <el-input v-model="data.children.props.recordsKey" placeholder="列表" clearable></el-input>
  </el-form-item>
  <el-form-item label="返回层级">
    <el-input v-model="data.children.props.resKey" placeholder="返回层级" clearable></el-input>
  </el-form-item>
  <el-form-item label="自动生成">
    <el-switch v-model="data.children.props.auto"></el-switch>
  </el-form-item>
  <div class="el-form--label-top">
    <div class="el-form-item">
      <label class="el-form-item__label" style="padding: 0;">
        <el-popover
          placement="top-start"
          :width="200"
          trigger="hover"
          content="填写以上配置后会自动生成，若觉得生成的不对请自行修改或关闭自动生成"
        >
          <template #reference>
            <el-link
              href="https://avuejs.com/form/form-input-table.html"
              :underline="false"
              target="_blank"
            >
              onLoad：
              <el-icon>
                <QuestionFilled></QuestionFilled>
              </el-icon>
            </el-link>
          </template>
        </el-popover>
      </label>
      <div class="el-form-item__content">
        <monaco-editor
          v-model="onLoad"
          height="200"
          :keyIndex="`table-onload-${data.prop}`"
          :options="options"
        ></monaco-editor>
      </div>
    </div>
    <div class="el-form-item">
      <label class="el-form-item__label" style="padding: 0;">formatter：</label>
      <div class="el-form-item__content">
        <monaco-editor
          v-model="formatter"
          height="200"
          :keyIndex="`table-formatter-${data.prop}`"
          :options="options"
        ></monaco-editor>
      </div>
    </div>
  </div>

  <afd-column ref="column" :column="data.children.column" @submit="handleColumn"></afd-column>
</template>
<script>
// import MonacoEditor from '../../../../utils/monaco-editor'
import { QuestionFilled } from '@element-plus/icons-vue'
import MonacoEditor from '../../../../utils/monaco-editor'
import AfdColumn from './column.vue'
export default {
  name: 'config-table',
  components: { MonacoEditor, QuestionFilled, AfdColumn },
  props: ['data'],
  watch: {
    'data.prop': {
      handler() {
        const { onLoad, formatter } = this.data
        this.onLoad = onLoad ? onLoad + '' : ''
        this.formatter = formatter ? formatter + '' : ''
      },
      immediate: true
    },
    'data.children.props': {
      handler(val) {
        this.handleOnLoad(val)
      },
      deep: true
    },

    formatter: {
      handler(val) {
        // alert(val)
        this.data.formatterJs = val;
      }
    },

      onLoad: {
        handler(val) {
          // alert(val)
          this.data.onLoadJs = val;
          try {
            this.data.onLoad = eval(val)
          } catch (e) {
            //alert(e);
            console.error(e)
          }
        }
      }
    },
  data() {
    return {
      options: {
        fullScreen: true,
        minimap: {
          enabled: false,
        },
      },
      onLoad: '',
      formatter: ''
    }
  },
  created() {
    if(!this.data.props.label){
      this.data.props.label = "name"
    }
    if(!this.data.props.value){
      this.data.props.value = "id"
    }
    if(!this.data.children){
      this.data.children = {};
    }




    if(!this.onLoad &&this.data.onLoadJs){
      this.onLoad = this.data.onLoadJs;
    }


    if(!this.formatter &&this.data.formatterJs){
      this.formatter = this.data.formatterJs;
    }

  },
  methods: {
    handleColumn(column) {
      this.data.children.column = column
    },
    handleOnLoad(obj) {
      const { url, method, needPage, currentPageKey, pageSizeKey, totalKey, recordsKey, resKey, auto } = obj
      if (!auto) return
      if (!url) {
        this.onLoad = `({ page, value, data }, cb) => { }`
        return
      }
      let { props } = this.data
      if (!props) props = { label: 'label', value: 'value' }
      const { value } = props
      const onLoad = `({ page, value, data }, cb) => {
        if (!page) page = { currentPage: 1, pageSize: 10 }
        const { currentPage, pageSize } = page
        let params = { ...data, ${currentPageKey || 'current'}: currentPage, ${pageSizeKey || 'page'}: pageSize }

        if (value) params['${value}'] = value

        if ('${method || 'get'}' == 'get') {
            params = { params: { ...params } }
        }else{
            params.entity =  JSON.parse(JSON.stringify(params));
        }

         let $callback = cb;
         window.request.${method}('${url}', params).then(res => {
          //const response = res.data.data
         const response = window.getObjDeepValue(res, '${resKey || 'data.data'}')
          let result = {}
          if (${needPage}) {
              result = {total: response[ '${totalKey || 'total'}'],data:response['${recordsKey || 'records'}']}
          } else {
              result = { total: response.length, data: response }
          }

          if (value) {
            const records = result.data
            if (records && records.length > 0) {
                $callback(records[0])
            }else {
                $callback(result)
            }
          } else{
           $callback(result)
           }
        })
      }`
      this.onLoad = onLoad
    },
  }
}
</script>
